import axios from "axios";
import React,{useState,useRef} from "react";
import { withRouter,RouteComponentProps } from "react-router-dom";
import { IuserRealName } from "../Home/My/Getvip";
import style from './index.module.css'
const {header,information,select,tops,determine,content,complete} = style


function RealName(props:RouteComponentProps){
    const formNode = useRef<HTMLFormElement>(null)

    const [isShow,setIsShow] = useState(false)

    const state = props.location.state as IuserRealName

    function touchDisplay() {
        setIsShow(true)
        document.body.style.backgroundColor = 'rgb(205 205 205)'
    }
    function touchHiden() {
        setIsShow(false)
        document.body.style.backgroundColor = ''
        goback()
    }
    function goback() {
        props.history.goBack()
    }
    function getInputValue() {
        //身份证验证
        const name = /[\u4e00-\u9fa5]/
        const ID = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        const inputValue:string[] = []
        formNode.current?.childNodes.forEach(item=>{
            const input = item.childNodes[0] as HTMLInputElement
            inputValue.push(input.value)
        })
        if(!name.test(inputValue[0])){
            alert('姓名有误')
            return
        }
        if(!ID.test(inputValue[1])){
            alert('身份证有误')
            return
        }
        if(inputValue[2].length <= 1){
            alert('社区有误')
            return
        }
        if(inputValue[3].length <= 1){
            alert('房标识有误')
            return
        }
        const userMessage = {
            name:inputValue[0],
            ID:inputValue[1],
            hometown:inputValue[2],
            house:inputValue[3]
        }
        axios.post('/api/realname',{...userMessage})
            .then((res)=>{
                console.log(res);
                touchDisplay()
            })
            .catch((error)=>{
                console.log(error);
            })
    }
    
    return (
        <div>
            <div className={header}>
                <p onClick={goback}></p>
                <p>{
                    state.realName ? '实名信息' : '实名认证'
                    }</p>
            </div>
            <div className={content}>
                {
                    isShow &&
                        <ul className={complete}>
                            <li></li>
                            <li>
                                <p>认证成功</p>
                                <p>全场优惠商品可享 <span>会员价</span>哦～</p>
                            </li>
                            <div onClick={touchHiden}>
                                <p></p>
                                <p></p>
                            </div>
                        </ul>
                        
                }
                <form className={information} ref={formNode}>
                    <li>
                        <input type="text" placeholder='请输入姓名' defaultValue={state.name}/>
                    </li>
                    <li>
                        <input type="text" placeholder='请输入身份证' defaultValue={state.ID}/>
                    </li>
                    <li>
                        <input type="text" placeholder='请选择社区' defaultValue={state.hometown}/>
                        <ul className={select}>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </li>
                    <li>
                        <input type="text" placeholder='请输入商品房（安置房）标识' defaultValue={state.house} />
                    </li>
                </form>
                <ul className={tops}>
                    <li>
                        <div></div>
                        <div>小提示</div>
                    </li>
                    <li>商品房住户，身份证非郑州户口也可实名</li>
                    <li>安置房住户，身份证非郑州户口不可实名</li>
                </ul>
                {
                    state.realName
                    ?
                    null
                    :
                    <button  onClick={getInputValue} className={determine}>确定</button>
                }
            </div>
        </div>
    )
}
export default withRouter(RealName)